import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class MyCollect extends StatefulWidget {
  const MyCollect({super.key});

  @override
  MyCollectState createState() => MyCollectState();
}

class MyCollectState extends State<MyCollect> {
  final List<Map<String, dynamic>> items = List.generate(
    20,
    (index) => {
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
      'title': '卖核弹',
      'price': 298,
      'height': 150 + index * 5, // 使每个商品的高度略有不同，模拟瀑布流
    },
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Center(child: Text('我的收藏'))),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 8),
        child: StaggeredGridView.countBuilder(
          crossAxisCount: 4, // 定义列数
          itemCount: 20, // 定义项目总数
          itemBuilder: (BuildContext context, int index) => Container(
            margin: EdgeInsets.symmetric(vertical: 4, horizontal: 4),
            child: Card(
              elevation: 4.0, // 卡片的阴影高度
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0), // 卡片的圆角
              ),
              child: Column(
                children: <Widget>[
                  Image.network(
                    items[index]['image'],
                    height: items[index]['height'].toDouble(),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      items[index]['title'],
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                  Text(
                    '¥${items[index]['price']}',
                    style: TextStyle(color: Colors.red),
                  ),
                ],
              ),
            ),
          ),
          staggeredTileBuilder: (int index) =>
              StaggeredTile.fit(2), // 定义每个项目的跨列数和跨行数
        ),
      ),
    );
  }
}
